
<template>
    <base-node type="db_query" :config="props.data" :id="props.id" ref="baseNode">
        <template #default>
            <div @mousedown.stop @wheel.stop>
                <div class="flex justify-between mb-1.5">
                    <label>Sql查询语句</label>
                    <n-popselect
                        v-model:value="insertValue"
                        :options="prevOutputFieldOptions"
                        size="medium"
                        scrollable
                    >
                        <n-button strong secondary type="success" size="tiny">
                            <jb-icon :local="true" icon="jam:plus-circle"></jb-icon>
                            插入变量
                        </n-button>
                    </n-popselect>
                </div>
                <textarea v-model="props.data.dbQueryConfig.sql" type="textarea" ref="textarea" :rows="8"
                          placeholder="要执行的select查询语句。&#13;&#10;可以通过 ${输出字段名} 引入其他节点的输出内容。"
                ></textarea>
            </div>

        </template>

        <template #footer>
            <p class="tc-gray ">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.dbQueryConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-140"></n-input>
                </div>
                <span class="tc-assist">数据库查询返回的结果</span>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="success" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 30px))" />
            <Handle type="source" id="fail" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% + 30px))" />
        </template>
    </base-node>
</template>
<script setup>
	import {
		Position,
		Handle,
		useNode
	} from '@vue-flow/core'
    import {
        ref,watch,nextTick,
        onMounted, computed,
    } from "vue";
    import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";
    const baseNode = ref(null);
	const props = defineProps(['id', 'data']) //默认配置


    /** 获取所有前置节点的输出字段，并生成下拉选项 */
    const prevOutputFieldOptions = computed(() => {
        return baseNode.value ? baseNode.value.prevOutputFieldOptions : [];
    });
    //变量数组
    const insertValue = ref('')
    const textarea = ref(null);
    //选中值,就在光标的指定位置插入值
    watch(() => insertValue.value, (newV) => {
        if (newV != "") {
            insertText('${' + newV + '}');
        }
        insertValue.value = '';
    })
    // 在指定位置插入变量
    const insertText = (insertText) => {
        // 确保textarea元素存在
        if (!textarea.value) return;

        // 初始化inputTpl，防止null或undefined的情况
        if (!props.data.dbQueryConfig.sql) {
            props.data.dbQueryConfig.sql= '';
        }

        // 获取光标起始位置和结束位置
        const startPos = textarea.value.selectionStart;
        const endPos = textarea.value.selectionEnd;

        // 插入文本到光标位置后
        const beforeText = props.data.dbQueryConfig.sql.substring(0, startPos);
        const afterText = props.data.dbQueryConfig.sql.substring(endPos, props.data.dbQueryConfig.sql.length);

        // 更新textarea的值
        props.data.dbQueryConfig.sql = beforeText + insertText + afterText;

        // 更新光标位置
        nextTick(() => {
            textarea.value.focus();
            textarea.value.setSelectionRange(startPos + insertText.length, startPos + insertText.length);
        });
    };
    // Validation rules
    const rules = {
        sql: {
            required: true,
            message: 'sql不能为空',
            trigger: 'blur'
        }
    }


	onMounted(() => {
	})
</script>


<style scoped lang="scss">

textarea {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #bfbfc2;
    padding: 5px;
    /* scrollbar-width: none;控制滚动条的宽度：auto | thin | none */
}

textarea:focus {
    border: 1px solid #18a058 !important;
    outline: none;
}
</style>